<template>
  <div id="homeheader" style="background-image: url('../../assets/imgs/bg_top.png')">
    <div style="align-items: center; display: flex">
      <span class="font-sans">12306后台管理系统</span>

      <Expand
        style="width: 1.5em; height: 1.5em; margin-right: 8px; color: #fcfcfc"
        @click="menuStore.isCollapse = !menuStore.isCollapse"
        v-show="isCollapse"
      />
      <Fold
        style="width: 1.5em; height: 1.5em; margin-right: 8px; color: #fcfcfc"
        @click="menuStore.isCollapse = !menuStore.isCollapse"
        v-show="!isCollapse"
      />
    </div>
  </div>
</template>
<style lang="scss" scoped>
.font-sans {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol', 'Noto Color Emoji';
  font-size: 1.5rem;
  line-height: 3rem;
  color: #fcfcfc;
  margin-right: 0.5rem;
  font-weight: 600;
}
#homeheader {
  // background-image: url(../../imgs/bg_top.png);
  background-color: #6366f1;
  display: flex;

  align-items: center;

  height: 48px;
  img {
    width: auto;
    height: 48px;
  }
}
</style>

<script setup>
import { Expand, Fold } from '@element-plus/icons-vue'
import { storeToRefs } from 'pinia'
import { useMenuStore } from '../../stores/menu'

const menuStore = useMenuStore()

const { isCollapse } = storeToRefs(menuStore)
</script>
